/**
 * WebSocket工具类使用示例
 * 展示如何在Vue组件中集成和使用WebSocketManager
 */

import WebSocketManager from './WebSocketManager.js';

// 在Vue组件中的使用示例
export const websocketMixin = {
	data() {
		return {
			// WebSocket实例
			wsManager: null,
			// 连接状态
			isSocketConnected: false,
			// 重连按钮显示
			showReconnectBtn: false,
			// 消息处理相关
			answerStatus: false,
			deepThink: false,
			deepThinkTime: 0,
			answerChart: false,
			answerImgSrc: '',
			answerImgSrcShow: false,
		};
	},

	methods: {
		/**
		 * 初始化WebSocket连接
		 */
		async initWebSocket() {
			try {
				// 创建WebSocket实例
				this.wsManager = new WebSocketManager({
					url: this.mockMode ? '' : `${this.wsUrl}${this.wsChatPath}/${this.historyId}/${this.agentIdAgent}/${this.getToken()}`,
					token: this.getToken(),
					mockMode: this.mockMode,
					historyId: this.historyId,
					agentId: this.agentIdAgent,
					maxReconnectAttempts: this.wxFailureRetryLimit || 3,
					reconnectInterval: 4000,
					heartbeatInterval: 20000,
					enableMessageQueue: true
				});

				// 设置事件监听
				this.setupWebSocketListeners();

				// 开始连接
				await this.wsManager.connect();
				
			} catch (error) {
				console.error('WebSocket初始化失败:', error);
			}
		},

		/**
		 * 设置WebSocket事件监听器
		 */
		setupWebSocketListeners() {
			// 连接成功
			this.wsManager.on('open', () => {
				console.log('WebSocket连接成功');
				this.isSocketConnected = true;
				this.showReconnectBtn = false;
				
				// 发送欢迎语
				this.debounceShowGreeting();
			});

			// 接收消息
			this.wsManager.on('message', (res) => {
				this.handleWebSocketMessage(res);
			});

			// 连接关闭
			this.wsManager.on('close', () => {
				console.log('WebSocket连接关闭');
				this.isSocketConnected = false;
				this.stopAnswer();
			});

			// 连接错误
			this.wsManager.on('error', (error) => {
				console.error('WebSocket连接错误:', error);
				this.isSocketConnected = false;
				this.stopAnswer();
			});

			// 重连结果
			this.wsManager.on('reconnect', (result) => {
				if (result.success) {
					console.log('WebSocket重连成功');
					this.showReconnectBtn = false;
				} else {
					console.log('WebSocket重连失败，显示手动重连按钮');
					this.showReconnectBtn = true;
				}
			});
		},

		/**
		 * 处理WebSocket消息
		 * 这里保持原有的消息处理逻辑
		 */
		handleWebSocketMessage(res) {
			// 复用原有的messageProcess逻辑
			this.messageProcess(res);
		},

		/**
		 * 发送消息
		 */
		async sendWebSocketMessage() {
			// 验证智能体ID
			if (!this.agentIdAgent && !this.mockMode) {
				this.showToast('必须传入智能体id');
				return;
			}

			// 验证token
			if (!this.mockMode && !this.getToken()) {
				this.showToast('必须配置token');
				return;
			}

			// 验证消息内容
			if (!this.message || this.message === '' || this.message.length <= 0) {
				return;
			}

			// 防止重复发送
			if (this.answerStatus) {
				this.showToast('请等待当前对话完成');
				return;
			}

			// 检查连接状态
			if (!this.isSocketConnected) {
				console.info('WebSocket未连接，尝试重连');
				await this.manualReconnect();
				return;
			}

			try {
				// 获取消息内容
				const message = this.message;
				this.message = null;
				this.microphone = false;

				// 添加用户消息到记录
				this.recordList.push({
					createTime: this.getCurrentDateTime(),
					type: 1,
					content: message,
					contentAppendData: null
				});

				this.toBottom();
				this.answerStatus = true;

				// 发送消息
				if (this.mockMode) {
					// Mock模式：可以传递额外参数
					await this.wsManager.send(message, {
						deepThink: this.activeList.includes(1)
					});
				} else {
					// 正式模式
					await this.wsManager.send(message);
				}

				// 创建AI回答占位
				this.createAnswerPlaceholder();

			} catch (error) {
				console.error('消息发送失败:', error);
				this.answerStatus = false;
				this.showToast('消息发送失败');
			}
		},

		/**
		 * 创建AI回答占位消息
		 */
		createAnswerPlaceholder() {
			this.recordList.push({
				createTime: this.getCurrentDateTime(),
				type: 2,
				content: ''
			});

			const lastIndex = this.recordList.length - 1;
			const msg = this.config.message.answerWait;

			// 启动等待动画
			this.timer = setInterval(() => {
				this.timerShow = true;
				let content = this.recordList[lastIndex].content;
				content = content.replace(msg, '');
				if (content.length >= 3) {
					content = msg + '.';
				} else {
					content = msg + content + '.';
				}
				this.recordList[lastIndex].content = content;
			}, 300);
		},

		/**
		 * 手动重连
		 */
		async manualReconnect() {
			try {
				this.showReconnectBtn = false;
				await this.wsManager.reconnect();
				this.showToast('重连成功');
			} catch (error) {
				console.error('手动重连失败:', error);
				this.showToast('重连失败');
				this.showReconnectBtn = true;
			}
		},

		/**
		 * 获取连接状态
		 */
		getWebSocketStatus() {
			if (this.wsManager) {
				return this.wsManager.getStatus();
			}
			return null;
		},

		/**
		 * 关闭WebSocket连接
		 */
		closeWebSocket() {
			if (this.wsManager) {
				this.wsManager.close();
				this.wsManager = null;
				this.isSocketConnected = false;
			}
		}
	},

	// 生命周期钩子
	async mounted() {
		// 初始化WebSocket
		await this.initWebSocket();
	},

	beforeDestroy() {
		// 组件销毁时关闭连接
		this.closeWebSocket();
	}
};

// 使用方式示例
export const useWebSocket = {
	// 在组件中混入
	mixins: [websocketMixin],
	
	data() {
		return {
			// 组件特有的数据
			mockMode: false,
			wsUrl: 'wss://your-websocket-url.com',
			wsChatPath: '/chat',
			historyId: 'your-history-id',
			agentIdAgent: 'your-agent-id',
			wxFailureRetryLimit: 3,
			// ... 其他数据
		};
	},

	methods: {
		// 获取token的方法
		getToken() {
			// 返回用户token
			return 'your-user-token';
		},

		// 显示提示消息的方法
		showToast(message) {
			// 实现提示消息显示
			console.log(message);
		},

		// 获取当前时间的方法
		getCurrentDateTime() {
			return new Date().toLocaleString();
		},

		// 防抖显示欢迎语
		debounceShowGreeting() {
			// 实现防抖显示欢迎语的逻辑
		},

		// 滚动到底部
		toBottom() {
			// 实现滚动到底部的逻辑
		},

		// 停止回答
		stopAnswer() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.answerStatus = false;
			this.timerShow = false;
			// 过滤掉等待消息
			this.recordList = this.recordList.filter((item) => 
				item.content?.indexOf(this.config.message.answerWait) !== 0
			);
		},

		// 保持原有的消息处理逻辑
		messageProcess(res) {
			// 这里保持你原有的消息处理逻辑不变
			// ... 原有的messageProcess代码 ...
			console.log('处理WebSocket消息:', res);
		}
	}
}; 